<template>
  <div id="app">
    <div class="wait-message" v-if="!question">等待教师发布题目...</div>
    <el-card v-else class="box-card" style="height: 700px;width: 800px;margin: 0 auto; margin-top: 100px;">
      <div class="container" ref="myElement">
        <div style="display: flex; align-items: center;">
          <el-button type="primary">{{ question.type == 'choice' ? '单选题' : question.type == 'multipleChoice' ?
            '多选题' : '未知类型' }}</el-button>
          <div style="font-weight: bold; white-space: wrap; margin-left: 10px;">{{ question.question }}
            ({{ question.score }}分)</div>
        </div>
        <div class="radio-container">
          <el-radio-group :data="tableData" v-model="answer" class="vertical-radios" v-if="question.type == 'choice'">
            <el-radio label="A" class="custom-radio-button">{{ question.optionA }}</el-radio>
            <el-radio label="B" class="custom-radio-button">{{ question.optionB }}</el-radio>
            <el-radio label="C" class="custom-radio-button">{{ question.optionC }}</el-radio>
            <el-radio label="D" class="custom-radio-button">{{ question.optionD }}</el-radio>
          </el-radio-group>
          <el-checkbox-group v-else v-model="answer2" class="vertical-radios" style="flex-direction: column;" @change="handleCheckedCitiesChange">
            <el-checkbox label="A" class="custom-radio-button">{{ question.optionA }}</el-checkbox>
            <el-checkbox label="B" class="custom-radio-button">{{ question.optionB }}</el-checkbox>
            <el-checkbox label="C" class="custom-radio-button">{{ question.optionC }}</el-checkbox>
            <el-checkbox label="D" class="custom-radio-button">{{ question.optionD }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="an-niu">
          <el-row class="mb-4">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button type="primary" @click="submit2">刷新</el-button>
            <el-button type="info" @click="submit3">退出</el-button>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      question: null,
      answer: '',
      isSubmit: false,
      answer2: []
    }
  },
  created() {
    this.queryQuestion()
  },
  methods: {
    queryQuestion() {
      const instance = axios.create({
        headers: {
          'Content-Type': 'application/json',
          'token': window.localStorage.getItem('token')
        }
      });
      instance
        .get('http://1.12.77.253:8080/student/selectQuestion')
        .then((result) => {
          console.log(result)
          if (result.data.code != 1) {
            this.$message.error('请求错误')
          } else {
            this.question = result.data.data
            this.isSubmit = false
          }
        })
        .catch((err) => {
          if (err.response.status == 401) {
            window.localStorage.clear()
          }
          this.$message.error('请求失败')
        })
    },
    submit() {
      if (!this.isSubmit) {
        let answer = this.answer
        if (this.question.type == 'multipleChoice') {
          answer = this.answer2.join("")
        }
        this.isSubmit = true
        const instance = axios.create({
          headers: {
            'Content-Type': 'application/json',
            'token': window.localStorage.getItem('token')
          }
        });
        instance
          .post('http://1.12.77.253:8080/common/question', {
            questionId: this.question.id,
            answer: answer,
          })
          .then((result) => {
            console.log(result)
            if (result.data.code != 1) {
              this.$message.error(result.data.msg)
            } else {
              this.$message({
                message: '答题成功',
                type: 'success',
              })
            }
            // this.tableData = result.data
            // this.question = this.tableData[this.index]
          })
          .catch((err) => {
            console.log("err:", err)
            if (err.response.status == 401) {
              window.localStorage.clear()
            }
            this.$message.error('请求失败')
          })
      } else {
        this.$message({
          message: '请勿重复提交',
          type: 'warning',
        })
      }
    },
    submit2() {
      location.reload()
    },
    submit3() {
      this.$message("退出成功")
      location.reload()
      window.localStorage.clear()
    },
    handleCheckedCitiesChange(val) {
      console.log('var', val)
      this.answer2 = val
    }
  },
}
</script>

<style scoped>
.container {
  /* 防止子元素换行 */
  white-space: nowrap;
}

.container>* {
  /* 设置为行内块级元素 */
  display: inline-block;
  /* 添加一些边距 */
  margin-right: 5px;
}

.radio-container {
  display: block;
}

.vertical-radios {
  display: flex;
  /* flex-direction: column; */
  justify-content: flex-start;
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 605px;
  margin-bottom: 50px;
  size: 10px;
}

.el-radio:last-child {
  margin-right: 34px;
}

.custom-radio-button {
  margin-top: 10px;
  /* 根据需要调整这个数值 */
}

.mb-4 {
  margin-left: 30px;
}
</style>
